<template>
	<view class="page">
		<view class="section_1">
			<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
			<image
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/446b536348525e60e10dad337a9a2534678ec503.png"
				class="image_4"></image>
		</view>
		<view class="section_2">
			<view class="section_4">
				<text lines="1" class="text_9">“我非常想要这个商品，快来帮我吧~”</text>
				<view class="box_1">
					<view class="image-wrapper_1">
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/43c336f0825cc7532e8db6674aa5781dfb728817.png"
							class="image_7"></image>
					</view>
					<view class="section_5">
						<text lines="1" class="text_10">哈他防滑瑜伽垫</text>
						<text lines="1" class="text_11">使用有效天数:30天</text>
						<view class="text-wrapper_4">
							<text lines="1" class="text_12">￥</text>
							<text lines="1" class="text_13">300.</text>
							<text lines="1" class="text_14">00</text>
						</view>
					</view>
					<view class="section_6">
						<text lines="1" class="text_15">可砍底价:¥100</text>
					</view>
				</view>
				<view class="image-wrapper_2">
					<view class="progress-container">
						<!-- <progress class="progress-bar" :percent="progressPercent" /> -->

						<view class="progress-amount" :style="{ left: amountLefta }">{{ amount }}</view>
						<view class="triangle" :style="{ left: amountLeft }"></view>

						<view class="" style="margin-top: 60rpx;">
							<u-line-progress :percentage="progressPercent" activeColor="#FD3E31"></u-line-progress>
						</view>
					</view>
				</view>
				<view class="box_2">
					<view class="text-wrapper_6">
						<text lines="1" class="text_17">23</text>
					</view>
					<view class="text_177">天</view>
					<view class="text-wrapper_7">
						<text lines="1" class="text_18">23</text>
					</view>
					<view  class="text_188">时</view>
					<view class="text-wrapper_8">
						<text lines="1" class="text_19">23</text>
					</view>
					<view  class="text_199">分</view>
					<view class="text-wrapper_9">
						<text lines="1" class="text_20">23</text>
					</view>
					<view  class="text_120">秒</view>
					<view class="image-text_1">
						<text lines="1" class="text-group_1">后砍价金额失效，快去帮忙</text>
					</view>
				</view>
				<view class="box_3">
					<view class="block_4">
						<text lines="1" class="text_21">喊好友砍一刀</text>
						<view class="text-wrapper_10">
							<text lines="1" class="text_22">分享</text>
						</view>
					</view>
					<view class="text-wrapper_11" @click="lijigoumai" >
						<text lines="1" class="text_23">立即购买¥280</text>
					</view>
					
					<!-- <view class="block_44">
						<view class="text-wrapper_10">
							<text lines="1" class="text_22">分享</text>
						</view>
					</view> -->
					<!-- <view class="text-wrapper_111">
						<text lines="1" class="text_23">立即购买¥280</text>
					</view> -->
				</view>
				<view class="text-wrapper_12">
					<text lines="1" class="text_24">已砍</text>
					<text lines="1" class="text_25">¥20</text>
					<text lines="1" class="text_26">，还差180.00</text>
				</view>
			</view>
			<scroll-view scroll-y="true" class="section_3">
				<view class="block_2" v-for="(item, index) in 10" :key="index">
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/446b536348525e60e10dad337a9a2534678ec503.png"
						class="image_5"></image>
					<view class="text-wrapper_1">
						<text lines="1" class="text_2">李*白</text>
						<text lines="1" decode="true" class="text_3">2021/12/15&nbsp;12:35:15</text>
					</view>
					<text lines="1" class="text_4">帮砍¥20</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				totalAmount: 1000, // 总金额
				currentAmount: 300, // 当前已砍金额
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "砍价详情",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
			};
		},
		computed: {
			progressPercent() {
				return (this.currentAmount / this.totalAmount) * 100;
			},
			progressPercenta() {
				return (this.currentAmount / this.totalAmount) * 100 - 10;
			},
			amountLeft() {
				return `${this.progressPercent}%`;
			},
			amountLefta() {
				return `${this.progressPercenta}%`;
			},
			amount() {
				return `已砍￥${this.currentAmount}`;
			},
			
		},
		methods:{
			lijigoumai(){
				// uni.navigateTo({
				// 	url:'./new_file'
				// })
			}
		}
	};
</script>

<style lang='scss'>
	@import '../static/css/common/common.scss';

	.progress-container {
		width: 300px;
		height: 20px;
		position: relative;
	}

	.progress-bar {
		height: 100%;
	}

	.progress-amount {
		position: absolute;
		top: -60rpx;
		height: 100%;
		line-height: 20px;
		background-color: #ff0000;
		color: #ffffff;
		padding: 0 10px;
		white-space: nowrap;
		border-radius: 50rpx 50rpx;
		font-size: 21rpx;
	}

	.triangle {
		position: absolute;
		top: -20rpx;
		width: 0rpx;
		height: 0rpx;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 10px solid #ff0000;
		/* background-color: #ff0000; */
	}

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		/* overflow: hidden; */
		display: flex;
		flex-direction: column;
		background-color: #ff0000;
	}

	.section_1 {
		width: 750rpx;
		height: 648rpx;
		background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6df47679e4b6a3448c93230763d9ef56a0105e9a.png') 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
	}


	.image_4 {
		width: 100rpx;
		height: 100rpx;
		margin: 330rpx 0 58rpx 325rpx;
	}

	.section_2 {
		background-color: rgba(254, 85, 65, 1.000000);
		height: 75vh;
		display: flex;
		flex-direction: column;
		width: 750rpx;
		position: absolute;
		left: 0rpx;
		top: 90%;
	}

	.section_3 {
		background-color: white;
		border-radius: 10rpx;
		height: 500rpx;
		width: 94%;
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		top: 670rpx;
		left: 20rpx;
		overflow: hidden;
	}

	.block_2 {
		width: 669rpx;
		height: 100rpx;
		flex-direction: row;
		display: flex;
		margin: 30rpx 0 0 20rpx;
	}

	.image_5 {
		width: 80rpx;
		height: 80rpx;
		margin-top: 1rpx;
	}

	.text-wrapper_1 {
		width: 224rpx;
		height: 82rpx;
		margin-left: 21rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text_2 {
		width: 62rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.text_3 {
		width: 224rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
		margin-top: 36rpx;
	}

	.text_4 {
		width: 100rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(253, 58, 49, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
		margin: 28rpx 0 0 244rpx;
	}

	.section_4 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 10rpx;
		position: absolute;
		top: -105rpx;
		width: 94%;
		height: 740rpx;
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		left: 20rpx;
	}

	.text_9 {
		width: 100%;
		height: 33rpx;
		overflow-wrap: break-word;
		color: #333333;
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		margin: 70rpx 0 0 0rpx;
	}

	.box_1 {
		background-color: rgba(252, 216, 210, 1.000000);
		border-radius: 10rpx;
		width: 670rpx;
		height: 180rpx;
		flex-direction: row;
		display: flex;
		justify-content: flex-center;
		margin: 40rpx 0 0 0rpx;
	}

	.image-wrapper_1 {
		background-color: rgba(243, 243, 243, 1.000000);
		border-radius: 10rpx;
		height: 140rpx;
		display: flex;
		flex-direction: column;
		width: 140rpx;
		margin: 10rpx 0 0 15rpx;
	}

	.image_7 {
		width: 109rpx;
		height: 78rpx;
		margin: 32rpx 0 0 18rpx;
	}

	.section_5 {
		/* width: 202rpx; */
		height: 140rpx;
		display: flex;
		flex-direction: column;
		margin: 10rpx 0 0 21rpx;
		flex: 1;
	}

	.text_10 {
		width: 198rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
		margin-left: 2rpx;
	}

	.text_11 {
		width: 202rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
		margin-top: 19rpx;
	}

	.text-wrapper_4 {
		width: 104rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
		margin: 40rpx 0 0 6rpx;
	}

	.text_12 {
		width: 104rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(255, 15, 15, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.text_13 {
		width: 104rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(255, 15, 15, 1);
		font-size: 28rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.text_14 {
		width: 104rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(255, 15, 15, 1);
		font-size: 22rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.section_6 {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.text_15 {
		width: 170rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 40rpx;

	}


	.image-wrapper_2 {
		/* background-color: rgba(229, 229, 229, 1.000000);
		border-radius: 13rpx;
		height: 26rpx;
		display: flex;
		flex-direction: column;
		width: 670rpx;
		margin: 18rpx 0 0 20rpx; */
		margin-left: 8%;
		margin-top: 20rpx;
	}

	.box_2 {
		width: 100%;
		height: 37rpx;
		flex-direction: row;
		display: flex;
		margin: 40rpx 0 0 50rpx;
	}

	.text-wrapper_6 {
		border-radius: 2rpx;
		height: 37rpx;
		display: flex;
		flex-direction: column;
		width: 37rpx;
		background: linear-gradient(90deg, #FD3E31, #F17E71);
		padding: 0 7rpx;
	}

	.text_17 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 21rpx;
		font-family: NotoSansHans-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 37rpx;
	}
	
	.text_177 {
		overflow-wrap: break-word;
		color: #EE774A;
		font-size: 21rpx;
		font-family: NotoSansHans-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 37rpx;
		margin-left: 10rpx;
	}
	.text_188 {
		overflow-wrap: break-word;
		color: #EE774A;
		font-size: 21rpx;
		font-family: NotoSansHans-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 37rpx;
		margin-left: 10rpx;
	}
	.text_199 {
		overflow-wrap: break-word;
		color: #EE774A;
		font-size: 21rpx;
		font-family: NotoSansHans-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 37rpx;
		margin-left: 10rpx;
	}
	.text_120 {
		overflow-wrap: break-word;
		color: #EE774A;
		font-size: 21rpx;
		font-family: NotoSansHans-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 37rpx;
		margin-left: 10rpx;
	}

	.text-wrapper_7 {
		height: 37rpx;
		/* background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps9sv18l03s6emagcv2nylrsjaivyy11zn91a53d27-f172-436f-93b5-09f5aff0649f) 100% no-repeat; */
		/* background-size: 100% 100%; */
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		width: 37rpx;
		background: linear-gradient(90deg, #FD3E31, #F17E71);
		padding: 0 7rpx;
	}

	.text_18 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 21rpx;
		font-family: NotoSansHans-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 37rpx;
	}

	.text-wrapper_8 {
		height: 37rpx;
		/* background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psngvgmg843bz9kavn6rgwh1w4r8ei3y9nd4f8aa1d-1af1-4509-9245-ba0164e24272) 100% no-repeat; */
		/* background-size: 100% 100%; */
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		width: 37rpx;
		background: linear-gradient(90deg, #FD3E31, #F17E71);
		padding: 0 7rpx;
	}

	.text_19 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 21rpx;
		font-family: NotoSansHans-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 37rpx;
	}

	.image-text_1 {
		width: 342rpx;
		height: 37rpx;
		margin-left: 16rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.text-wrapper_9 {
		height: 37rpx;
		/* background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psvsfa8whiqsoevcq104lr0fyqtjtqj6l8l3b4b55c5-ff60-42e1-932a-0d72535186e4) 100% no-repeat; */
		/* background-size: 100% 100%; */
		display: flex;
		flex-direction: column;
		width: 37rpx;
		background: linear-gradient(90deg, #FD3E31, #F17E71);
		margin-left: 10rpx;
		padding: 0 7rpx;
	}

	.text_20 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 21rpx;
		font-family: NotoSansHans-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 37rpx;
	}

	.text-group_1 {
		width: 294rpx;
		height: 37rpx;
		overflow-wrap: break-word;
		color: rgba(253, 58, 49, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 37rpx;
	}

	.box_3 {
		width: 100%;
		height: 120rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0 0 0;
	}

	.block_4 {
		position: relative;
		width: 350rpx;
		height: 120rpx;
		background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1c2929634532242ca9a07c00348f3d21a36318cd.png') 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
	}
	.block_44 {
		position: relative;
		width: 100%;
		height: 120rpx;
		background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2d20150ce5860afe8797f3232f44ae82e0a282cf.png') 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
	}

	.text_21 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 100rpx;
	}

	.text-wrapper_10 {
		background-color: rgba(255, 202, 0, 1.000000);
		border-radius: NaNrpx;
		height: 30rpx;
		display: flex;
		flex-direction: column;
		width: 66rpx;
		position: absolute;
		left: 18rpx;
		top: 2rpx;
	}

	.text_22 {
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 30rpx;
	}

	.text-wrapper_11 {
		height: 117rpx;
		background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/31c0b4d4b89f513944f452bdda3092e215b5615d.png') 0rpx -1rpx no-repeat;
		background-size: 350rpx 119rpx;
		display: flex;
		flex-direction: column;
		width: 350rpx;
	}
	.text-wrapper_111 {
		height: 117rpx;
		background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e9b0b90296de57c2511b3a992781c6819a81e959.png') 0rpx -1rpx no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.text_23 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 100rpx;
	}

	.text-wrapper_12 {
		width: 290rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
		margin: 9rpx 0 26rpx 211rpx;
	}

	.text_24 {
		width: 290rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.text_25 {
		width: 290rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(255, 15, 15, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.text_26 {
		width: 290rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}
</style>